<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>
      {{ info }}
      <!-- v-for 循环遍历 遍历的过程中创建当前元素，类似java的新循环 -->
      <h1 v-for="name in arr">{{ name }}</h1>
      <table border="1">
        <caption>
          人物列表
        </caption>
        <tr>
          <th>名字</th>
          <th>年龄</th>
          <th>性别</th>
        </tr>
        <tr v-for="p in persons">
          <td>{{ p.name }}</td>
          <td>{{ p.age }}</td>
          <td>{{ p.gender }}</td>
        </tr>
      </table>
      <table border="1">
        <caption>
          商品列表
        </caption>
        <tr>
          <th>商品</th>
          <th>价格</th>
          <th>数量</th>
        </tr>
        <tr v-for="prod in products">
          <td>{{ prod.title }}</td>
          <td>{{ prod.price }}</td>
          <td>{{ prod.num }}</td>
        </tr>
      </table>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
      let app = new Vue({
        el: "body > div",
        data: {
          info: "循环遍历",
          arr: ["刘备", "关羽", "张飞"],
          persons: [
            { name: "刘备", age: 30, gender: "男" },
            { name: "孙尚香", age: 60, gender: "女" },
            { name: "刘禅", age: 80, gender: "男" },
          ],
          products: [
            { title: "冰红茶", price: 3, num: 1000 },
            { title: "脉动", price: 4, num: 2000 },
            { title: "元气森林", price: 5, num: 500 },
          ],
        },
        methods: {},
      });
    </script>
  </body>
</html>
